<template>
  <div>
    <footer class="footer" v-show="canShowFooter">
      <!-- This should be `0 items left` by default -->
      <span class="todo-count">
        <strong>{{ leftItemCount }}</strong> item left
      </span>
      <!-- Remove this if you don't implement routing -->
      <ul class="filters">
        <li>
          <a class="selected" href="#/">All</a>
        </li>
        <li>
          <a href="#/active">Active</a>
        </li>
        <li>
          <a href="#/completed">Completed</a>
        </li>
      </ul>
      <!-- Hidden if no completed items are left ↓ -->
      <button class="clear-completed" @click="clearCompleted">Clear completed</button>
    </footer>
  </div>
</template>

<script>
// 使用辅助函数
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      // 未完成项数目
      leftItemCount: this.$store.state.list.filter(item => item.done == false)
        .length
    };
  },
  methods: {
    // 删除已经完成的项
    clearCompleted() {
      this.$store.dispatch("clearCompelete");
    }
  },
  // 计算属性
  computed: {
    // 这样引入，isShowFooter就成了footer组件上的一个计算属性了，绑定到了该组件vm的实例上，直接用
    // ...mapGetters(["isShowFooter"])
    // 这样写将isShowFooter导入成计算属性时顺便还重命名成了canShowFooter
    ...mapGetters({
      canShowFooter: "isShowFooter"
    })
  }
};
</script>

<style lang="css" scoped>
</style>